<template>
  <div
    style="
      display: flex;
      width: 100%;
      height: 100%;
      padding: 20px;
      justify-content: space-around;
    "
  >
    <div id="main" ref="main" style="width: 600px; height: 400px">
      <div style="padding-left: 150px; padding-bottom: 20px">
        <h2>上周课程购买数量折线图</h2>
      </div>
      <v-chart class="chart" :option="option" />
    </div>
    <div style="width: 600px; height: 400px">
      <div style="padding-left: 200px; padding-bottom: 20px">
        <h2>热门课程分类总览</h2>
      </div>
      <v-chart class="chart2" :option="option2"></v-chart>
    </div>
  </div>
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

provide(THEME_KEY, "dark");

const option = ref({
  // title: {
  //   text: '上周课程购买数量折线图'
  // },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Java", "前端", "C语言", "Python", "C++"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: [
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
      "星期日",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "前端",
      type: "line",
      data: [22, 18, 19, 23, 29, 43, 55],
    },
    {
      name: "C语言",
      type: "line",
      data: [15, 23, 21, 15, 19, 33, 50],
    },
    {
      name: "Python",
      type: "line",
      data: [32, 32, 31, 33, 39, 33, 42],
    },
    {
      name: "Java",
      type: "line",
      data: [51, 63, 70, 76, 89, 93, 95],
    },
    {
      name: "C++",
      type: "line",
      data: [12, 13, 10, 13, 9, 23, 21],
    },
  ],
});

// const option = ref({
//   title: {
//     text: "Traffic Sources",
//     left: "center"
//   },
//   tooltip: {
//     trigger: "item",
//     formatter: "{a} <br/>{b} : {c} ({d}%)"
//   },
//   legend: {
//     orient: "vertical",
//     left: "left",
//     data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
//   },
//   series: [
//     {
//       name: "Traffic Sources",
//       type: "pie",
//       radius: "55%",
//       center: ["50%", "60%"],
//       data: [
//         { value: 335, name: "Direct" },
//         { value: 310, name: "Email" },
//         { value: 234, name: "Ad Networks" },
//         { value: 135, name: "Video Ads" },
//         { value: 1548, name: "Search Engines" }
//       ],
//       emphasis: {
//         itemStyle: {
//           shadowBlur: 10,
//           shadowOffsetX: 0,
//           shadowColor: "#fff"
//         }
//       }
//     }
//   ]
// });

const option2 = ref({
  // title: {
  //   text: '课程分类总览',
  //   subtext: '热门课程',
  //   left: 'center'
  // },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Java" },
        { value: 735, name: "前端" },
        { value: 580, name: "C语言" },
        { value: 484, name: "python" },
        { value: 300, name: "C++" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
